<template>
    <div class="formdelist formdelist_a">
        <a-form-model layout="vertical" :model="config">
            <a-form-model-item :label="i18n('list.title','选择Ureport')">
                <rx-input-button v-model="config.ureport" @click="selectUreport"></rx-input-button>
            </a-form-model-item>
        </a-form-model>
        <a-tabs default-active-key="1" class="treedeflist">
            <a-tab-pane key="1">
                <span slot="tab"> {{i18n('list.receiveData','接收数据配置')}} </span>
                <a-form-model :model="config.receive">
                    <a-form-model-item :label="$comi18('formDef.queryParamSource', '查询参数来源')">
                        <a-select
                            default-value="url"
                            v-model="config.receive.type"
                            :options="sourceAry"
                            :getPopupContainer="(p) => p.parentNode"
                            :allowClear="true"
                        >
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('formDef.deployeEvent', '发布事件组件')" v-if="config.receive.type == 'event'">
                        <a-select
                            v-model="config.receive.publishComponent"
                            :options="publishComponent"
                            allowClear
                            @change="changeComponent"
                            :getPopupContainer="(p) => p.parentNode"
                        >
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('list.paramMap','参数映射')">
                        <a-button-group class="abuttonhert">
                            <a-button class="abutton" @click="addParams">
                                <i class="iconjia iconfont"></i>
                            </a-button>
                            <a-button class="abutton" @click="removeSelect()">
                                <i class="icontrash iconfont"></i>
                            </a-button>

                            <a-button class="abutton" @click="moveUp()">
                                <i class="iconshang iconfont"></i>
                            </a-button>

                            <a-button class="abutton" @click="moveDown()">
                                <i class="iconxia iconfont"></i>
                            </a-button>
                        </a-button-group>
                        <a-table
                            :dataSource="config.receive.mapping"
                            :pagination="false"
                            :rowSelection="receiveRowSelection"
                            rowKey="idx_"
                            :bordered="true"
                        >
                            <a-table-column :title="i18n('form.paramName','参数名称')" dataIndex="name">
                                <template slot-scope="text, record">
                                    <a-select v-model="record.name"
                                              :getPopupContainer="(p) => p.parentNode"
                                              :options="ureportParamsDef"
                                              :allowClear="true">
                                    </a-select>
                                </template>
                            </a-table-column>
                            <a-table-column :title="i18n('form.valueSource','值来源')" dataIndex="valueSource">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.valueSource"
                                        :options="valueSourceDef"
                                        :getPopupContainer="(p) => p.parentNode"
                                        :allowClear="true"
                                    >
                                    </a-select>
                                </template>
                            </a-table-column>
                            <a-table-column :title="i18n('form.paramValue','参数值')" dataIndex="valueDef">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.valueDef"
                                        :options="compomentParamsDef"
                                        :allowClear="true"
                                        :getPopupContainer="(p) => p.parentNode"
                                        v-if=" config.receive.type == 'event' && record.valueSource == 'param'"
                                    >
                                    </a-select>
                                    <a-select
                                        v-model="record.valueDef"
                                        :options="params"
                                        :allowClear="true"
                                        :getPopupContainer="(p) => p.parentNode"
                                        v-if="config.receive.type == 'url' && record.valueSource == 'param'"
                                    >
                                    </a-select>
                                    <a-input v-model="record.valueDef"
                                             v-if="record.valueSource == 'fixedVar'"></a-input>
                                    <a-input-group v-if="record.valueSource == 'script'" compact>
                                        <div style="display: flex">
                                            <a-input style="flex:1;margin-right: 0px" v-model="record.valueDef"/>
                                            <a-button @click="openScriptQuery(record)">...</a-button>
                                        </div>
                                    </a-input-group>
                                    <a-select
                                        v-if="record.valueSource == 'constantVar'"
                                        v-model="record.valueDef"
                                        :options="constantField"
                                        allowClear
                                        :getPopupContainer="(p) => p.parentNode"
                                    ></a-select>
                                </template>
                            </a-table-column>
                        </a-table>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import {GridMixin, RxFit, Dialog, RxInputButton, Util} from "@lowcode/jpaas-common-lib";
import ComponentDef from "@/views/modules/form/core/formComponent/ComponentDef";
import UreportListDialog from "@/views/modules/form/core/UreportListDialog";
import FormCustomQueryApi from "@/api/form/core/formCustomQuery";

export default {
    name: "UreportDef",
    props: {},
    mixins: [GridMixin, ComponentDef],
    components: {
        RxInputButton,
        RxFit,
    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    data() {
        return {
            config: {
                ureport: "",
                receive: {
                    type: 'event',
                    publishComponent: '',
                    mapping: [],
                },
                ureportParamsDef: [],
            },
            valueSourceDef: [
                {value: 'param', label: this.$ti18('rxForm.param', '参数传入')},
                {value: 'fixedVar', label: this.$ti18('rxForm.fixedVar', '固定值')},
                {value: 'script', label: this.$ti18('rxForm.script', '脚本')},
                {value: 'constantVar', label: this.$ti18('rxForm.constantVar', '常量')},
            ],
            compomentParamsDef: [],
            constantField: [],
            publishComponent: [],
            selectedRowKeys: [],
            ureportParamsDef: [],
            sourceAry: [
                {value: 'url', label: this.listI18n('form.incomParam','来自传入参数')},
                {value: 'event', label: this.$comi18('formDef.fromComponent', '来自组件')},
            ],
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"UreportDef",key);
        },
        listI18n(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        init() {
            this.ureportParamsDef = [];
            this.config.ureportParamsDef = []
            if (this.conf) {
                this.config = this.conf;
                this.changeComponent(this.config.receive.publishComponent)
                this.ureportParamsDef = this.config.ureportParamsDef
            }
            this.loadConstants();
            this.publishComponent = this.getPublishOptions()
        },
        openScriptQuery(record) {
            Dialog.openScripttextDialog(
                {
                    curVm: this,
                    widthHeight: ['800px', '600px'],
                    zIndex:9999,
                    data: {script: record.valueDef},
                },
                function (self, data) {
                    record.valueDef = data
                }
            )
        },
        selectUreport() {
            var self = this;
            self.ureportParamsDef = [];
            self.config.ureportParamsDef = [];
            Util.open({
                component: UreportListDialog,
                curVm: this,
                title: this.i18n('list.title', '选择Ureport'),
                data: {multiSelect: false},
                zIndex: 10000,
                widthHeight: ['800px', '600px']
            }, function (action, data) {
                if (action != "ok") {
                    return;
                }
                var obj = data[0]
                self.config.ureport = JSON.stringify({value: obj.id, text: obj.name});
                let params = obj.ureportFileQueryParameterList;

                if (params) {
                    for (let param of params) {
                        self.ureportParamsDef.push({label: param.name, value: param.name});
                        self.config.ureportParamsDef.push({label: param.name, value: param.name});
                    }
                }
                self.$emit('dragclick',self.config,self.index,self.type)
            });
        },
        changeComponent(val) {
            if(!val){
                return;
            }
            if (this.config.alias == val) {
                this.config.receive.publishComponent = ''
                this.$notification.warning({ message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.i18n('msa.changeComTips','发布事件组件不能选择自己!') })
                return
            }
            this.compomentParamsDef = this.getPubParams(val)
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        addParams() {
            this.config.receive.mapping.push({ idx_: Util.randomId(), name: '', valueSource: '', valueDef: '' })
        },
        moveUp() {
            this.toUp(this.config.receive.mapping, this.selectedRowKeys)
        },
        moveDown() {
            this.toDown(this.config.receive.mapping, this.selectedRowKeys)
        },
        removeSelect() {
            this.removeRows(this.config.receive.mapping, this.selectedRowKeys)
        },
        loadConstants() {
            FormCustomQueryApi.getConstants().then((data) => {
                this.constantField = this.constantField.concat(
                    data.map((item) => {
                        return { label: item.val, value: item.key }
                    })
                )
            })
        },
    },
    watch: {}
}
</script>

<style scoped>
    .formdelist{
        padding: 0 10px;
    }
</style>